<template>
    <!-- 容器组件以 xxx-contaienr 结尾 -->
    <div class="children-container">
        <h3 class="title">
            <span>{{title}}</span>
        </h3>

        <button @click="$emit('changeTitle', '要修改的标题')">修改标题</button>
    </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
/**
 * props 声明：
 *   尽可能详细定义你的 prop，且注意它的默认值
 *   如果 prop 的名字很长，应使用 camelCase 形式
 */
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    disabled: Boolean,
})
/* 尽管是可选的，但是推荐定义所有要触发的事件类型 */
const emit = defineEmits(['changeTitle']);
const handleClick = () => {
    emit('changeTitle', '要修改的标题');
}

</script>

<style lang="scss" scoped></style>